<template>
  <div class="info-box">
    <template v-for="(item, index) in leftTopDataList" :key="item">
      <div class="box-item-row">
        <template v-for="(itm, index) in item">
          <div class="box-item">
            <img class="img" :src="itm.url" alt="" />
            <div class="info">
              <div class="text">{{ itm.text }}</div>
              <div class="number">{{ itm.number }}</div>
            </div>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>
<script setup lang="js">
defineProps({
  leftTopDataList: {
    type: Object,
    default: () => [],
  },
});
</script>

<style lang="less" scoped>
.info-box {
  box-sizing: border-box;
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .box-item-row {
    flex: 1;
    display: flex;
    .box-item {
      width: 100%;
      height: 100%;
      flex: 1;

      color: #fff;
      font-size: 16px;
      font-family: 思源黑体 CN;
      font-weight: 400;
      opacity: 0.9;
      display: flex;
      align-items: end;
      box-sizing: border-box;
      padding-left: 30px;
      .img {
        width: 78px;
        height: 68px;
      }
      .info {
        font-size: 16px;
        margin-left: 10px;
        margin-bottom: 14px;
        .text {
        }
        .number {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
